import classNames from 'classnames';
import React, { ReactNode } from 'react';
import styles from './index.module.scss';

/*
  学习目标：封装Input-扩展三个属性
  需求：
     1. extra 属性，表示接收额外的内容
     2. errorMsg 属性，表示接收错误信息
     3. className属性，允许用户覆盖、控制样式
     4. 封装input 透传额外属性 [key: string]: any;
       4.1 定义剩下属性的类型...resProps  索引签名类型  
     5. 用继承方式 去 继承原生的
*/

interface InputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  extra?: ReactNode;
  errorMsg?: string;
  className?: string;
}

export default function Input(props: InputProps) {
  const { extra, errorMsg, className, ...resProps } = props;
  return (
    <div className={classNames(styles.root, className)}>
      <div className="input-item">
        <div className="input-box">
          <input className="input" {...resProps} />
          <div className="validate">{errorMsg}</div>
          {/* 这里是发送验证码的位置 可以有无 */}
          {extra && <div className="extra">{extra}</div>}
        </div>
      </div>
    </div>
  );
}
